import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3



Page{
    id:root
    title: "Button"


    Dial{
        id: control
        anchors.centerIn: parent
        width: 400
        height: 400
        to:1.0
        stepSize:0.25
        snapMode:Dial.SnapAlways
        wrap:true
        onMoved:{
            console.log(control.value)
        }

        background:Image{
            anchors.fill: parent
            source: "Dial/back.png"
        }
//        background: Rectangle {
//          x: control.width / 2 - width / 2
//          y: control.height / 2 - height / 2
//          width: Math.max(64, Math.min(control.width, control.height))
//          height: width
//          color: "transparent"
//          radius: width / 2
//          border.color: control.pressed ? "#17a81a" : "#21be2b"
//          opacity: control.enabled ? 1 : 0.3
//        }

              handle: Rectangle {
                  id: handleItem
                  x: control.background.x + control.background.width / 2 - width / 2
                  y: control.background.y + control.background.height / 2 - height / 2
                  width: 6
                  height: 44
                  color: control.pressed ? "#17a81a" : "#21be2b"
                  //radius: 8
                  antialiasing: true
                  opacity: control.enabled ? 1 : 0.3
                  transform: [
                      Translate {
                          y: -Math.min(control.background.width, control.background.height) * 0.4 + handleItem.height / 2
                      },
                      Rotation {
                          angle: control.angle
                          origin.x: handleItem.width / 2
                          origin.y: handleItem.height / 2
                      }
                  ]
              }
    }


}
